import React, { useEffect, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Card, Table, Popconfirm, Avatar, Space, message } from 'antd';
import type { CurrentUser, UserProps } from './components/data';
import type { ProColumns } from '@ant-design/pro-table';
import { getUserList, deleteUser } from '@/services/user';
import UpdateModalForm from './components/UpdateModalForm';
import CreateModalForm from './components/CreateModalForm';
import moment from 'moment';
const UserManager: React.FC<UserProps> = () => {
  const [refreshCount, setRefreshCount] = useState(0);
  const [userList, setUserList] = useState([]);
  const fetchList = async () => {
    const res = await getUserList();
    if (res.success) {
      setUserList(res.data);
    } else {
      setUserList([]);
    }
  };
  useEffect(() => {
    fetchList();
  }, [refreshCount]);

  const handleDelete = async (id: number) => {
    const hide = message.loading('正在删除');
    if (!id) return true;
    try {
      const res = await deleteUser({ id });
      hide();
      if (res.success) {
        setRefreshCount(refreshCount + 1);
        message.success('删除成功');
      } else {
        return false;
      }
      return true;
    } catch (error) {
      hide();
      return false;
    }
  };
  const columns: ProColumns<CurrentUser>[] = [
    {
      title: '用户名',
      dataIndex: 'username',
      ellipsis: true,
    },
    {
      title: '电话号码',
      dataIndex: 'phone_number',
      copyable: true,
      ellipsis: true,
    },
    {
      title: '角色类型',
      dataIndex: 'role',
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      hideInSearch: true,
      render: (_) => {
        return <Avatar src={_} />;
      },
    },
    {
      title: '创建时间',
      dataIndex: 'CreatedAt',
      valueType: 'dateRange',
      hideInTable: true,
      render: (_) => {
        return _ && moment(_).format('YYYY-MM-DD');
      },
    },
    {
      title: '操作',
      valueType: 'option',
      render: (_, record) => {
        return (
          <Space>
            <UpdateModalForm formVals={record} setRefreshCount={setRefreshCount} />
            {record.ID && (
              <Popconfirm
                placement="top"
                title="确定删除嘛？"
                onCancel={() => handleDelete(record.ID)}
                cancelButtonProps={{ type: 'primary', danger: true }}
                okText="取消"
                cancelText="是的"
                okType="default"
              >
                <Button key="view" type="primary" danger>
                  删除
                </Button>
              </Popconfirm>
            )}
          </Space>
        );
      },
    },
  ];
  return (
    <PageContainer>
      <Card
        extra={<CreateModalForm setRefreshCount={setRefreshCount} />}
        bodyStyle={{
          padding: 0,
        }}
      >
        <Table dataSource={userList} columns={columns} />
      </Card>
    </PageContainer>
  );
};

export default UserManager;
